<template>
  <div class="page cinema-list">
    <!-- 顶部导航 -->
    <div class="topbar">
      <div class="brand" @click="goHome">
        <el-icon><VideoCamera /></el-icon>
        <span>影院列表</span>
      </div>
      <div class="actions">
        <el-link type="primary" @click="goHome">首页</el-link>
      </div>
    </div>

    <!-- 英雄区：搜索与筛选 -->
    <section class="hero glass">
      <h1 class="title">发现附近影院</h1>
      <p class="subtitle">按名称或地址搜索，并支持状态筛选</p>
      <div class="toolbar">
        <el-input v-model="keyword" placeholder="输入关键字（名称/地址）" clearable class="input">
          <template #prepend>
            <el-icon><Search /></el-icon>
          </template>
        </el-input>
        <el-select v-model="status" placeholder="状态" clearable class="select">
          <el-option label="全部" value="" />
          <el-option label="营业中" value="OPEN" />
          <el-option label="暂停营业" value="CLOSED" />
        </el-select>
        <el-button type="primary" @click="onSearch">搜索</el-button>
      </div>
    </section>

    <!-- 列表区 -->
    <section class="content" v-loading="loading">
      <div v-if="items.length" class="grid">
        <el-card
          v-for="c in items"
          :key="c.id"
          class="card clickable"
          @click="c.id && goDetail(c.id)"
        >
          <div class="card-header">
            <h3 class="name">{{ c.cname || '未命名影院' }}</h3>
            <el-tag :type="tagType(c.status)">{{ statusText(c.status) }}</el-tag>
          </div>
          <div class="card-body">
            <p class="row">
              <el-icon><Location /></el-icon>
              <span>{{ c.address || '地址未知' }}</span>
            </p>
            <p class="row">
              <el-icon><Iphone /></el-icon>
              <span>{{ c.phone || '电话未知' }}</span>
            </p>
          </div>
          <div class="card-footer">
            <el-button type="primary" text @click.stop="goDetail(c.id)">查看详情</el-button>
          </div>
        </el-card>
      </div>
      <el-empty v-else description="暂无影院数据" />

      <div class="pager" v-if="total > 0">
        <el-pagination
          background
          layout="total, sizes, prev, pager, next"
          :total="total"
          :page-sizes="[8,12,16,24]"
          :page-size="pageSize"
          :current-page="pageNo"
          @size-change="handleSizeChange"
          @current-change="handlePageChange"
        />
      </div>
    </section>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { VideoCamera, Search, Location, Iphone } from '@element-plus/icons-vue'
import { pageCinemas, searchCinemas } from '@/api/cinema'

const router = useRouter()

const keyword = ref('')
const status = ref('')
const pageNo = ref(1)
const pageSize = ref(12)
const total = ref(0)
const items = ref([])
const loading = ref(false)

const tagType = (s) => {
  if (s === 'OPEN') return 'success'
  if (s === 'CLOSED') return 'warning'
  return 'default'
}
const statusText = (s) => {
  if (s === 'OPEN') return '营业中'
  if (s === 'CLOSED') return '暂停营业'
  return '未知状态'
}

const fetchList = async () => {
  loading.value = true
  try {
    const params = { pageNo: pageNo.value, pageSize: pageSize.value }
    let res
    if (keyword.value && keyword.value.trim()) {
      res = await searchCinemas({ keyword: keyword.value.trim(), ...params })
    } else {
      // page 接口支持 cname 模糊与 status 筛选
      res = await pageCinemas({ cname: '', status: status.value || undefined, ...params })
    }
    if (res && (res.code === '200' || res.code === 200)) {
      items.value = res.data?.records || []
      total.value = res.data?.total || 0
    } else {
      ElMessage.error(res?.msg || '获取影院列表失败')
    }
  } catch (e) {
    console.error(e)
    ElMessage.error('网络异常，稍后重试')
  } finally {
    loading.value = false
  }
}

onMounted(fetchList)

const onSearch = () => {
  pageNo.value = 1
  fetchList()
}

const handlePageChange = (p) => {
  pageNo.value = p
  fetchList()
}

const handleSizeChange = (s) => {
  pageSize.value = s
  pageNo.value = 1
  fetchList()
}

const goDetail = (id) => router.push(`/cinema/${id}`)
const goHome = () => router.push('/')
</script>

<style scoped>
.page {
  min-height: 100vh;
  background: radial-gradient(1000px 500px at 10% 10%, rgba(99,102,241,0.18), transparent),
              radial-gradient(800px 400px at 90% 0%, rgba(16,185,129,0.14), transparent),
              #0b1020;
  color: #e5e7eb;
}
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-weight: 600;
  letter-spacing: 0.6px;
}
.actions :deep(.el-link) { margin-left: 12px; }

.hero {
  margin: 16px auto 24px;
  padding: 28px 24px;
  max-width: 980px;
  border-radius: 16px;
  background: rgba(255,255,255,0.12);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.22);
}
.title { font-size: 24px; font-weight: 700; margin: 0 0 6px; }
.subtitle { color: #a3a7b3; margin: 0 0 16px; }
.toolbar { display: flex; gap: 12px; }
.input { flex: 1; }
.select { width: 160px; }

.content { max-width: 1100px; margin: 0 auto 40px; padding: 0 12px; }
.grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 1200px) { .grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px) { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .grid { grid-template-columns: 1fr; } }

.card { background: rgba(255,255,255,0.12); border-radius: 14px; border: 1px solid rgba(255,255,255,0.18); box-shadow: 0 6px 18px rgba(0,0,0,0.35); }
.card.clickable { cursor: pointer; transition: transform .2s ease, box-shadow .2s ease; }
.card.clickable:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0,0,0,0.45); }
.card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.name { font-size: 18px; font-weight: 600; margin: 0; color: #f1f5f9; }
.card-body { color: #e5e7eb; }
.row { display: flex; align-items: center; gap: 8px; margin: 6px 0; }
.card-footer { display: flex; justify-content: flex-end; margin-top: 6px; }

.pager { display: flex; justify-content: center; margin-top: 20px; }
</style>